<template>
    <div class="skill-chart-panel">
      <div ref="chartDom" class="chart-area"></div>
      <div class="skill-details">
        <div class="skill-detail">
          <div class="color-indicator" :style="{ backgroundColor: skillColorBelow }"></div>
          <span class="skill-text">本科以下</span>
          <span class="skill-value">{{ belowPercent }}%</span>
          <span class="count">({{ belowCount }})</span>
        </div>
        <div class="skill-detail">
          <div class="color-indicator" :style="{ backgroundColor: skillColorBach }"></div>
          <span class="skill-text">本科</span>
          <span class="skill-value">{{ bachPercent }}%</span>
          <span class="count">({{ bachCount }})</span>
        </div>
        <div class="skill-detail">
          <div class="color-indicator" :style="{ backgroundColor: skillColorAbove }"></div>
          <span class="skill-text">本科以上</span>
          <span class="skill-value">{{ abovePercent }}%</span>
          <span class="count">({{ aboveCount }})</span>
        </div>
      </div>
    </div>
</template>
  
  <script setup lang="ts">
  import { ref, onMounted, onUnmounted, shallowRef, computed } from 'vue';
  import * as echarts from 'echarts/core';
  import type { EChartsOption } from 'echarts';
  import variables from '../../variables.less?raw';
  
  function getLessVariable(varName: string): string {
      const match = variables.match(new RegExp(`@${varName}:\\s*([^;]+);`));
      return match ? match[1].trim() : '#ccc';
  }
  
  const chartDom = ref<HTMLElement | null>(null);
  const myChart = shallowRef<echarts.ECharts | null>(null);
  

  const belowCount = ref(125);
  const bachCount = ref(35); 
  const aboveCount = ref(68);

  
  const totalSkills = computed(() => belowCount.value + bachCount.value + aboveCount.value);
  
  const belowPercent = computed(() => totalSkills.value > 0 ? ((belowCount.value / totalSkills.value) * 100).toFixed(2) : '0.00');
  const bachPercent = computed(() => totalSkills.value > 0 ? ((bachCount.value / totalSkills.value) * 100).toFixed(2) : '0.00');
  const abovePercent = computed(() => totalSkills.value > 0 ? ((aboveCount.value / totalSkills.value) * 100).toFixed(2) : '0.00');
  
  const skillData = computed(() => [
    { value: belowCount.value, name: '本科以下' },
    { value: bachCount.value, name: '本科' },
    { value: aboveCount.value, name: '本科以上' },
  ]);
  
 
  const largestSkill = computed(() => skillData.value.reduce((max, item) => item.value > max.value ? item : max, skillData.value[0] || { value: 0, name: '' }));
  const largestPercentage = computed(() => totalSkills.value > 0 ? ((largestSkill.value.value / totalSkills.value) * 100).toFixed(2) : '0.00');
  
  const axisLineColor = getLessVariable('axis-line-color');
  const textColor = getLessVariable('text-color');
  const skillColorBelow = getLessVariable('skill-color-below');
  const skillColorBach = getLessVariable('skill-color-bach');
  const skillColorAbove = getLessVariable('skill-color-above');
  const panelBg = getLessVariable('bg-color-base'); 
  
  const option = computed((): EChartsOption => ({ 
      tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}人 ({d}%)',
          backgroundColor: 'rgba(3, 28, 66, 0.9)',
          borderColor: axisLineColor,
          textStyle: { color: '#fff' }
      },
      graphic: [ 
          {
              type: 'text', left: 'center', top: '38%',
              style: {
                  text: largestPercentage.value + '%', textAlign: 'center',
                  fill: largestSkill.value.name === '本科以下' ? skillColorBelow : largestSkill.value.name === '本科' ? skillColorBach : skillColorAbove,
                  fontSize: 22, fontWeight: 'bold'
              }
          },
          {
              type: 'text', left: 'center', top: '55%',
              style: {
                  text: largestSkill.value.name, textAlign: 'center',
                  fill: textColor, fontSize: 12
              }
          }
      ],
      series: [{
          name: '学历构成', type: 'pie', radius: ['65%', '85%'], center: ['50%', '50%'],
          avoidLabelOverlap: false, label: { show: false }, labelLine: { show: false },
          emphasis: { label: { show: false }, scaleSize: 5 },
          data: skillData.value, 
          itemStyle: {
              color: [skillColorBelow, skillColorBach, skillColorAbove],
              borderWidth: 3,
              borderColor: panelBg 
          }
      }]
  }));
  
  const resizeChart = () => myChart.value?.resize();
  
  onMounted(() => {
    if (chartDom.value) {
      myChart.value = echarts.init(chartDom.value);
      myChart.value.setOption(option.value);
      window.addEventListener('resize', resizeChart);
  
    
    }
  });
  
  onUnmounted(() => {
    window.removeEventListener('resize', resizeChart);
    myChart.value?.dispose();
  });
  
  </script>
  
  <style lang="less" scoped>
  @import '../../variables.less';
  
  .skill-chart-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .chart-area {
    width: 100%;
    height: 180px; 
    flex-shrink: 0;
  }
  
  .skill-details {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    flex-shrink: 0;
    padding: 0 5px; // Add slight horizontal padding
  }
  
  .skill-detail {
    text-align: center;
    display: flex;
    align-items: center;
    font-size: 12px;
    gap: 5px; // Gap between elements
  }
  
  .color-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
  }
  
  .skill-text {
    color: @text-color;
    white-space: nowrap;
  }
  
  .skill-value {
    font-weight: bold;
    color: @primary-color;
     white-space: nowrap;
  }
  
  .count {
    font-size: 10px;
    color: darken(@text-color, 15%);
     white-space: nowrap;
  }
  </style>